<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- <form action="http://192.168.58.110/php/post.php" method="post">
        <input type="text" name="username" class="user">
        <br>
        <input type="password" name="password" class="pwd">
        <br>
        <button type="submit" class="btn">注册</button>
    </form> -->

    <input type="text" name="username" class="user">
    <br>
    <input type="password" name="password" class="pwd">
    <br>
    <button type="submit" class="btn">注册</button>


    <script>

        // http://192.168.58.110/php/post.php
        //    要求  
        //      请求方式post
        //      需要携带数据
        //          username   名字          
        //          password   密码


        // get请求是在接口后面？拼接参数
        //     参数是直接裸露在地址栏   安全性较低   但是执行效率更高一点

        // post请求参数是在send中携带 --- 编码行为
        //     普通看不到参数   安全性更高一些    响应速度更慢一点


        // get请求有数据大小的限制  
        // post请求的数据大小没有限制


        //  post 请求会更多
        //  查询  更多的会使用get  





        // post请求携带参数
        // send(key=value&key=value)

        // 注意：
        //    post请求需要声明请求头  --- 告诉后端是这种方式传的数据


        const get = ele => document.querySelector(ele);
        get('.btn').onclick = function () {
            // 获取用户名和密码
            const username = get('.user').value;
            const password = get('.pwd').value;
            // 验证
            // 请求
            const xhr = new XMLHttpRequest();
            xhr.open('post', 'http://192.168.58.110/php/post.php', true);
            // 设置请求头
            //   setRequestHeader('' , '');
            xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');
            // 测试   用户名和密码写死了
            xhr.send('username=yy&password=123');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText);
                }
            }
        }

    </script>

</body>

</html>